<%
  // when multiple listings are supported, the prices array will have one price object for each
  const totalPrice =
    ob.prices[0]
      .price
      .plus(ob.prices[0].vPrice);

  const pricingCurrency = ob.listingPrice.currencyCode;
%>

<div class="popInMessageHolder js-popInMessages"></div>

<div class="topControls gutterHSm flex">
  <% if (ob.vendor) { %>
  <div class="contentBox clrP clrSh3 clrBr clrT">
    <div class="padSm gutterHSm overflowAuto margRSm flexVCent">
      <a class="clrBr2 clrSh1 discTn flexNoShrink" style="<%= ob.getAvatarBgImage(ob.vendor.avatarHashes) %>"></a>
      <p class="txUnl tx3 clamp"><%= ob.vendor.name %></p>
      <a class="link flexNoShrink tx6 js-goToListing"><% print(ob.polyT('purchase.returnToListing')) %></a>
    </div>
  </div>
  <% } %>
</div>

<div class="flexRow gutterH mainSection <%= ob.phaseClass %>">
  <div class="col9">
    <div class="flexColRow gutterV">
      <% // to support multiple items in a purchase, loop this section %>
      <section class="contentBox pad clrP clrBr clrSh3">
        <div class="js-errors"></div>
        <div class="js-items-quantity-errors"></div>
        <% if (!ob.isCrypto) { %>
          <div class="flexVCent gutterH">
            <div class="thumb" style="<%= ob.getListingBgImage(ob.listing.item.images[0]) %>"></div>
            <div class="flexExpand">
              <div class="flexCol gutterVTn">
                <div class="width100 noOverflow">
                  <b><%= ob.listing.item.title %></b>
                </div>
                <% ob.variants.forEach(variant => { %>
                  <div class="width100 noOverflow">
                    <span class="clrT2"><%= variant.name %>: <%= variant.value %></span>
                  </div>
                <% }); %>
              </div>
            </div>
            <% if (ob.phase === 'pay' || ob.phase === 'processing') { %>
            <div class="flexNoShrink">
              <div class="flexVCent gutterH">
                <div class="flexCol">
                  <label class="flexHRight" for="purchaseQuantity">
                    <span class="required txB margR"><%= ob.polyT('purchase.quantity') %></span>
                  </label>
                </div>
                <div class="flexNoShrink">
                  <input
                      class="clrBr clrP"
                      type="text"
                      id="purchaseQuantity"
                      size="3"
                      name="bigQuantity"
                      value="<%= ob.quantity %>"
                      placeholder="0"
                      data-var-type="bignumber">
                </div>
              </div>
            </div>
            <% } %>
            <div class="pad flexNoShrink">
              <b>
                 <%= ob.currencyMod.convertAndFormatCurrency(totalPrice, pricingCurrency, ob.displayCurrency) %>
              </b>
            </div>
          </div>
        <% } else { %>
          <div class="flexVCent gutterHLg row cryptoTitleWrap">
            <div class="js-cryptoTitle <% if (ob.phase !== 'pay' && ob.phase !== 'processing') print('flexExpand') %>"></div>
            <% if (ob.phase === 'pay' || ob.phase === 'processing') { %>
              <div class="flexExpand">
                <div class="flexVCent gutterHLg">
                  <label for="cryptoAmount" class="clrT txB required"><%= ob.polyT('purchase.cryptoAmount') %></label>
                  <div class="inputSelect">
                    <input type="text" class="clrBr clrP clrSh2" name="bigQuantity" id="cryptoAmount" value="<%= ob.quantity %>" placeholder="0.0000" size="8" data-var-type="bignumber">
                    <% if (ob.displayCurrency !== ob.listing.metadata.coinType) { %>
                      <select id="cryptoAmountCurrency" class="clrBr clrP nestInputRight">
                        <% [ob.listing.metadata.coinType, ob.displayCurrency].forEach((cur) => {%>
                          <option value="<%= cur %>" <% if (cur === ob.cryptoAmountCurrency) print('selected'); %>><%= cur %></option>
                        <% }); %>
                      </select>
                    <% } %>
                  </div>
                </div>
              </div>
            <% } %>
            <div class="pad flexNoShrink">
              <%=
                ob.crypto.cryptoPrice({
                  priceAmount: totalPrice,
                  priceCurrencyCode: pricingCurrency,
                  displayCurrency: ob.displayCurrency,
                  priceModifier: ob.listing.item.priceModifier,
                })
              %>
            </div>
          </div>
          <hr class="clrBr rowLg" />
          <%
            const coinType = ob.listing.metadata.coinType;
            const coinTranslationKey = `cryptoCurrencies.${coinType}`;
            const coinName = ob.polyT(coinTranslationKey) === coinTranslationKey ?
              coinType : ob.polyT(coinTranslationKey);
            const heading = ob.polyT('purchase.cryptoAddressHeading', {
              coinType: coinName,
            });
            const placeholder = ob.polyT('purchase.cryptoAddressPlaceholder', {
              coinType: coinName,
            });
            const warning = ob.phase === 'pay' || ob.phase === 'processing' ?
              `<b>${ob.polyT('purchase.cryptoAddressHelperWarning')}</b>` :
              `<b>${ob.polyT('purchase.cryptoAddressHelperWarning2')}</b>`;
            const helper = ob.polyT('purchase.cryptoAddressHelper', {
              name: ob.vendor.name,
              coinType: coinName,
              warning,
            });
          %>
          <div class="rowSm">
            <label class="h4 flexExpand required" for="purchaseCryptoAddress"><%= heading %></label>
          </div>
          <div class="js-items-paymentAddress-errors"></div>
          <% if (ob.phase === 'pay' || ob.phase === 'processing') { %>
            <input type="text" id="purchaseCryptoAddress" value="<%= ob.items[0].paymentAddress %>" placeholder="<%= placeholder %>" class="clrBr clrP rowSm" maxlength=<%= ob.itemConstraints.maxPaymentAddressLength %> />
          <% } else { %>
            <p class="cryptoPaymentAddress"><%= ob.items[0].paymentAddress %></p>
          <% } %>
          <div class="txSm clrT2"><%= helper %></div>
        <% } %>
      </section>
      <% if (ob.phase === 'pay' || ob.phase === 'processing') { %>
        <% if (ob.listing.shippingOptions && ob.listing.shippingOptions.length) { %>
          <section class="contentBox padMd clrP clrBr clrSh3 js-shipping">
            <div class="js-shipping-errors js-items-shipping-errors"></div>
            <div class="js-shippingWrapper"></div>
          </section>
        <% } %>
        <section class="contentBox padMd clrP clrBr clrSh3">
          <div class="flexColRows gutterVSm">
            <div>
              <div class="js-paymentCoin-errors"></div>
              <h2 class="h4 flexExpand required"><%= ob.polyT('purchase.cryptoCurrencyTitle') %></h2>
              <div class="js-cryptoCurSelectorWrapper"></div>
            </div>
          </div>
        </section>
        <section class="contentBox padMd clrP clrBr clrSh3">
          <div class="flexColRows gutterVSm">
            <div class="flexVCentClearMarg">
              <h2 class="h4 flexExpand required"><%= ob.polyT('purchase.paymentTypeTitle') %></h2>
              <% if (ob.showModerators) { %>
                <input type="checkbox" id="purchaseVerifiedOnly" class="js-purchaseVerifiedOnly"<% if (ob.showVerifiedOnly) print('checked') %>>
                <label class="tx5b" for="purchaseVerifiedOnly"><%= ob.polyT('settings.storeTab.verifiedOnly') %></label>
              <% } %>
            </div>
            <% if (ob.showModerators && !ob.noValidModerators) { %>
              <div class="js-moderated-errors"></div>
              <div class="js-moderatorsWrapper"></div>
              <% if (!ob.noValidModerators) { %>
                <div>
                  <div class="clrT2 tx6 rowMd"><%= ob.polyT('purchase.moderatorsDisclaimer') %></div>
                </div>
              <% } %>
              <hr class="clrBr row">
            <% } %>
            <div class="js-directPaymentWrapper moderatorsList"></div>
          </div>
        </section>
      <section class="contentBox padMd clrP clrBr clrSh3">
        <h2 class="h4">
          <%= ob.polyT('purchase.informationTitle') %>
          <span class="clrT2 txUnb tx5b"><%= ob.polyT('purchase.optional') %></span>
        </h2>
        <div class="flexRow gutterH row">
          <div class="col6">
            <div class="rowTn">
              <label for="emailAddress" class="tx5">
                <%= ob.polyT('purchase.emailAddress') %>
              </label>
            </div>
            <div>
              <input
                  class="btnHeight clrBr clrP js-purchaseField"
                  type="text"
                  id="emailAddress"
                  name="alternateContactInfo"
                  placeholder="<%= ob.polyT('purchase.emailPlaceholder') %>"
                  value="<%= ob.alternateContactInfo %>">
            </div>
            <div>
              <span class="txSm clrT2"><%= ob.polyT('purchase.emailNote') %></span>
            </div>
          </div>
          <div class="col6">
            <% if (ob.hasCoupons) { %>
            <div class="rowTn">
              <label for="couponCode" class="tx5">
                <%= ob.polyT('purchase.couponCode') %>
              </label>
            </div>
            <div class="flex gutterH row">
              <input
                  class="btnHeight clrBr clrP"
                  type="text"
                  id="couponCode"
                  name="couponCode"
                  placeholder="<%= ob.polyT('purchase.couponCodePlaceholder') %>">
              <button class="btn clrP clrBr clrSh2 flexNoShrink js-applyCoupon">
                <%= ob.polyT('purchase.applyCode') %>
              </button>
            </div>
            <div class="js-couponsWrapper">
              <% // coupons are inserted here after they are added by the user. %>
            </div>
            <% } %>
          </div>
        </div>
        <hr class="clrBr row">
        <div class="rowTn">
          <label for="memo" class="tx5">
            <%= ob.polyT('purchase.memo') %>
          </label>
        </div>
        <textarea
            class="clrBr clrP js-purchaseField"
            id="memo"
            name="memo"
            maxlength="5000"
            rows="6"
            placeholder="<%= ob.polyT('purchase.memoPlaceholder') %>"><%= ob.items[0].memo %></textarea>
      </section>
      <% } %>
      <% if (ob.phase === 'pending') { %>
        <section class="contentBox padMd clrP clrBr clrSh3 js-pending"></section>
      <% } %>
      <% if (ob.phase === 'complete') { %>
        <section class="contentBox padMd clrP clrBr clrSh3 js-complete"></section>
      <% } %>
    </div>
  </div>
  <div class="col3">
    <section class="contentBox pad clrP clrBr clrSh3 sidebar">
      <i class="js-close cornerTR ion-ios-close-empty iconBtn clrP clrBr clrSh3 closeBtn"></i>
      <div class="js-actionBtn"></div>
      <div class="rowLg">
        <div class="js-receipt"></div>
        <% if (ob.showModerators && !ob.noValidModerators) { %>
          <hr class="clrBr">
          <div class="padSm txSm txCtr clrT2">
            <%= ob.polyT('purchase.moderatorNote') %>
          </div>
        <% } %>
      </div>
      <div class="tx6 js-feeChangeContainer"></div>
    </section>
  </div>
</div>
